/**
 * @author 云离
 * @date: 2018/12/28
 */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {Modal, Form, Input, Button, Row, Col, Select, DatePicker} from 'antd'
import { connect } from 'react-redux'
import {actions} from "../../../../reducers/main";
const Option = Select.Option
const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
    },
};

const mapStateToProps = (state, ownProps) => {
    return {
        payTypeList: state.main.payTypeList, // 支付类型
        groups: state.main.groups, // 分组
        agentList: state.main.agentList, // 码商带来
        banks: state.main.banks, // 银行
        address: state.main.address, //模拟地址
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        fetchInitData: (next) => dispatch(actions.fetchInitData(next))
    }
}

class AccountForm extends Component {
    static propTypes = {
        visible: PropTypes.bool.isRequired,
        okCb: PropTypes.func.isRequired,
        cancelCb: PropTypes.func.isRequired,
        title: PropTypes.string.isRequired,
        initForm: PropTypes.object.isRequired
    }
    componentWillReceiveProps(nextProps, nextContext) {
        if (nextProps.visible && !this.props.visible) {
            this.props.form.resetFields();
        }
    }
    handleOk = () => {
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.props.okCb(values)
            }
        });
    }


    render() {
        const {visible, cancelCb, title, initForm} = this.props
        const { getFieldDecorator } = this.props.form;
        const {payTypeList, groups, agentList, banks, address} = this.props

        return (
            <Modal
                title={title}
                visible={visible}
                onOk={this.handleOk}
                onCancel={cancelCb}
                confirmLoading={this.props.confirmLoading}
                okText={'确认'}
                cancelText={'取消'}
                >
                <Form {...formItemLayout}>
                    <Form.Item label={'账号'}>
                        {getFieldDecorator('account', {
                            initialValue: initForm['account'] || '',
                            rules: [{ required: true, message: '请输入账号'}],
                        })(
                            <Input/>
                        )}
                    </Form.Item>
                    <Form.Item label={'银行短信通知号码'}>
                        {getFieldDecorator('bankMessageNo', {
                            initialValue: initForm['bankMessageNo'] || '',
                        })(
                            <Select style={{ width: '100%' }}>
                                <Option value="">========请选择========</Option>
                                {banks.map(item => <Option value={item.phone} key={item.phone}>{item.name}({item.phone})</Option>)}
                            </Select>
                        )}
                    </Form.Item>
                    <Form.Item label={'手机号'}>
                        {getFieldDecorator('phoneNo', {
                            initialValue: initForm['phoneNo'] || '',
                            rules: [{ required: true, message: '请输入手机号'}],
                        })(
                            <Input/>
                        )}
                    </Form.Item>
                    <Form.Item label={'银行卡id'}>
                        {getFieldDecorator('cardId', {
                            initialValue: initForm['cardId'] || '',
                            rules: [{ required: true, message: '请输入银行卡id'}],
                        })(
                            <Input/>
                        )}
                    </Form.Item>
                    <Form.Item label={'银行卡缩写'}>
                        {getFieldDecorator('bankMark', {
                            initialValue: initForm['bankMark'] || '',
                        })(
                            <Select style={{ width: '100%' }}>
                                <Option value="">========请选择========</Option>
                                {banks.map(item => <Option value={item.short} key={item.short}>{item.name}({item.short})</Option>)}
                            </Select>
                        )}
                    </Form.Item>
                    <Form.Item label={'银行名称'}>
                        {getFieldDecorator('bankName', {
                            initialValue: initForm['bankName'] || '',
                        })(
                            <Select style={{ width: '100%' }}>
                                <Option value="">========请选择========</Option>
                                {banks.map(item => <Option value={item.name} key={item.name}>{item.name}</Option>)}
                            </Select>
                        )}
                    </Form.Item>
                    <Form.Item label={'支付类型'}>
                        {getFieldDecorator('payType', {
                            initialValue: initForm['payType'] || '',
                            rules: [{ required: true, message: '请选择支付类型'}],
                        })(
                            <Select style={{ width: '100%' }}>
                                <Option value="">========请选择========</Option>
                                {payTypeList.map(item => <Option value={item.payType} key={item.payType}>{item.payLabel}</Option>)}
                            </Select>
                        )}
                    </Form.Item>
                    <Form.Item label={'商家账户(APPID)'}>
                        {getFieldDecorator('appid', {
                            initialValue: initForm['appid'] || '',
                            rules: [{ required: true, message: '请输入商家账户'}],
                        })(
                            <Input/>
                        )}
                    </Form.Item>
                    <Form.Item label={'别名'}>
                        {getFieldDecorator('alias', {
                            initialValue: initForm['alias'] || '',
                            rules: [{ required: true, message: '请输入别名'}],
                        })(
                            <Input/>
                        )}
                    </Form.Item>
                    <Form.Item label={'模拟地址'}>
                        {getFieldDecorator('address', {
                            initialValue: initForm['address'] || '',
                        })(
                            <Select style={{ width: '100%' }}>
                                <Option value="">========请选择========</Option>
                                {address.map(item => <Option value={item} key={item}>{item}</Option>)}
                            </Select>
                        )}
                    </Form.Item>
                    <Form.Item label={'分组'}>
                        {getFieldDecorator('groupName', {
                            initialValue: initForm['groupName'] || '',
                        })(
                            <Select style={{ width: '100%' }}>
                                <Option value="">========请选择========</Option>
                                {groups.map(item => <Option value={item.groupName} key={item.groupName}>{item.groupName}</Option>)}
                            </Select>
                        )}
                    </Form.Item>
                    <Form.Item label={'状态'}>
                        {getFieldDecorator('status', {
                            initialValue: initForm['status'] || '0',
                        })(
                            <Select style={{ width: '100%' }}>
                                <Option value='0'>正常</Option>
                                <Option value='1'>停用</Option>
                            </Select>
                        )}
                    </Form.Item>
                </Form>
            </Modal>
        )
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Form.create()(AccountForm))
